<template>
  <div class="page-user">
    <Window />
    <div class="left">
      <div class="menu">
        <router-link class="" to="/user">
          <i :class="'item flash iconfont icon-all' + ($route.path == '/user' ? '-fill on' : '')"></i>
        </router-link>
        <router-link to="/user/checkout">
          <i :class="'item flash iconfont icon-phone' + ($route.path == '/user/checkout' ? '-fill on' : '')"></i>
        </router-link>
        <router-link to="/user/account">
          <i :class="'item flash iconfont icon-bussiness-man' + ($route.path == '/user/account' ? '-fill on' : '')"></i>
        </router-link>
        <router-link to="/user/config">
          <i :class="'item flash iconfont icon-set' + ($route.path == '/user/config' ? '-fill on' : '')"></i>
        </router-link>

        <div class="bottom">
          <el-popover placement="right-end">
            <template #reference>
              <i class="item flash iconfont icon-earth"></i>
            </template>
            <Language />
          </el-popover>
          <el-popconfirm
            :title="lang.t('alert.logout')"
            @confirm="userModel.logout()"
            confirmButtonType="danger"
            placement="right-end"
            hideIcon
          >
            <template #reference>
              <i class="item flash iconfont icon-switch error"></i>
            </template>
          </el-popconfirm>
        </div>
      </div>
    </div>
    <el-scrollbar>
      <div class="right">
        <router-view v-if="userModel.getData().name" />
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import app from '@/app'
import userModel from '@/model/user'

import Window from '@/components/window'
import Language from '@/components/language'

export default {
  components: {
    Window,
    Language
  },
  setup() {
    // 获取用户信息
    userModel.get()

    return {
      lang: app.lang,
      userModel
    }
  }
}
</script>